<script setup lang="ts">
import { withDefaults, defineProps, ref, onUnmounted } from "vue";
import { NTime, NSpace } from "naive-ui";

const date = ref<number | Date>(0);

const weekday = new Array<string>(7);
weekday[0] = "星期天";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";

// 挂载时启动定时器更新data
date.value = new Date();
const task = setInterval(() => {
  date.value = new Date();
}, 500);

onUnmounted(() => {
  clearInterval(task);
});
</script>

<template>
  <NSpace class="tw-place-self-center" justify="center" align="center">
    <NTime :time="date" format="yyyy-MM-dd" />
    <div>{{ weekday[date.getDay()] }}</div>
    <NTime :time="date" format="hh:mm:ss" />
  </NSpace>
</template>
